<template>
  <div class="login-container">
    <div class="content">
      <h1 class="logo">
        <router-link to="/">
          <img
            alt="知乎 LOGO"
            class="logo"
            src="https://pic2.zhimg.com/80/v2-f6b1f64a098b891b4ea1e3104b5b71f6_720w.png"
          />
        </router-link>
      </h1>
      <div class="login">
        <ValidateForm @form-submit="onFormSubmit">
          <div class="mb-3">
            <label for="email" class="form-label">Email address</label>
            <ValidateInput
              ref="inputRef"
              class="input"
              :rules="emailRules"
              type="text"
              id="email"
              v-model="emailVal"
              placeholder="请输入邮箱"
            />
          </div>
          <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label"
              >Password</label
            >
            <ValidateInput
              type="password"
              placeholder="请输入密码"
              :rules="passwordRules"
              v-model="passwordVal"
            />
          </div>
          <template #submit>
            <button type="submit" class="btn btn-danger btn-block btn-large">
              登录
            </button>
          </template>
        </ValidateForm>

        <div class="tip">
          <div>
            未注册手机验证后自动登录，注册即代表同意<a
              href="https://www.zhihu.com/term/zhihu-terms"
              >《知乎协议》</a
            ><a href="https://www.zhihu.com/term/privacy">《隐私保护指引》</a>
          </div>
        </div>

        <div class="Login-socialLogin">
          <span>社交帐号登录</span
          ><span class="ButtonGroup"
            ><button
              type="button"
              class="Button Login-socialButton Button--plain"
            >
              <svg
                width="20"
                height="20"
                fill="#60c84d"
                viewBox="0 0 24 24"
                data-new-api="Wechat24"
                data-old-api="WeChat"
                class="Zi Zi--WeChat Login-socialIcon"
              >
                <path
                  fill="#07C160"
                  d="M19.918 18.357c1.27-.921 2.082-2.282 2.082-3.795 0-2.772-2.698-5.02-6.024-5.02-3.327 0-6.024 2.248-6.024 5.02 0 2.772 2.697 5.02 6.024 5.02.665 0 1.327-.092 1.966-.275l.177-.027c.116 0 .221.036.32.092l1.32.762.115.038a.202.202 0 00.186-.124.202.202 0 00.015-.077l-.032-.147-.272-1.012-.021-.129a.4.4 0 01.168-.326zM9.23 4C5.237 4 2 6.697 2 10.024c0 1.815.973 3.45 2.497 4.554a.48.48 0 01.203.392l-.025.153-.326 1.215-.039.176c0 .134.108.242.24.242l.14-.045 1.583-.914a.756.756 0 01.384-.111l.212.031c.767.22 1.562.332 2.36.331l.397-.01a4.655 4.655 0 01-.243-1.476c0-3.034 2.952-5.494 6.593-5.494l.392.01C15.824 6.201 12.835 4 9.23 4zm4.739 9.76a.803.803 0 110-1.605.803.803 0 010 1.604v.001zm4.016 0a.803.803 0 110-1.605.803.803 0 010 1.604v.001zM6.82 9.06a.963.963 0 110-1.927.963.963 0 010 1.927zm4.82 0a.964.964 0 110-1.927.964.964 0 010 1.927z"
                  clip-rule="evenodd"
                ></path></svg
              >微信</button
            ><button
              type="button"
              class="Button Login-socialButton Button--plain"
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                data-new-api="Qq24"
                data-old-api="QQ"
                class="Zi Zi--QQ Login-socialIcon"
                fill="#50c8fd"
              >
                <path
                  d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.483 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.288.687 6.288 0 0-.688-1.77-1.182-1.77-1.182 2.086-1.77 1.906-3.967 1.906-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.165-6.954-2.165-6.954V9.325C18.29 3.364 14.268 2 12.003 2z"
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                ></path></svg
              >QQ</button
            ><button
              type="button"
              class="Button Login-socialButton Button--plain"
            >
              <svg
                width="20"
                height="20"
                fill="#fb6622"
                viewBox="0 0 24 24"
                data-new-api="Weibo24"
                data-old-api="Weibo"
                class="Zi Zi--Weibo Login-socialIcon"
              >
                <path
                  fill="#FB6622"
                  d="M15.518 3.06c8.834-.854 7.395 7.732 7.394 7.731-.625 1.44-1.673.31-1.673.31.596-7.52-5.692-6.33-5.692-6.33-.898-1.067-.03-1.71-.03-1.71zm4.13 6.985c-.66 1.01-1.376.126-1.375.126.205-3.179-2.396-2.598-2.396-2.598-.72-.765-.091-1.346-.091-1.346 4.882-.55 3.863 3.818 3.863 3.818zM5.318 7.52s4.615-3.86 6.443-1.328c0 0 .662 1.08-.111 2.797.003-.003 3.723-1.96 5.408.16 0 0 .848 1.094-.191 2.648 0 0 2.918-.099 2.918 2.715 0 2.811-4.104 6.44-9.315 6.44-5.214 0-8.026-2.092-8.596-3.102 0 0-3.475-4.495 3.444-10.33zm10.448 7.792s.232-4.41-5.71-4.207c-6.652.231-6.58 4.654-6.58 4.654.022.39.098 3.713 5.843 3.713 5.98 0 6.447-4.16 6.447-4.16zm-9.882.86s-.06-3.632 3.804-3.56c3.412.06 3.206 3.164 3.206 3.164s-.026 2.98-3.684 2.98c-3.288 0-3.326-2.584-3.326-2.584zm2.528 1.037c.672 0 1.212-.447 1.212-.998 0-.55-.543-.998-1.212-.998-.672 0-1.215.447-1.215.998 0 .551.546.998 1.215.998z"
                  clip-rule="evenodd"
                ></path></svg
              >微博
            </button></span
          >
        </div>
      </div>
    </div>
    <footer class="SignFlowHomepage-footer">
      <div class="ZhihuLinks">
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://zhuanlan.zhihu.com"
          >知乎专栏</a
        ><a target="_blank" rel="noopener noreferrer" href="/roundtable">圆桌</a
        ><a target="_blank" rel="noopener noreferrer" href="/explore">发现</a
        ><a target="_blank" rel="noopener noreferrer" href="/app">移动应用</a
        ><a target="_blank" rel="noopener noreferrer" href="/contact"
          >联系我们</a
        ><a
          target="_blank"
          rel="noopener noreferrer"
          href="https://app.mokahr.com/apply/zhihu"
          >来知乎工作</a
        ><a target="_blank" rel="noopener noreferrer" href="/org/signup"
          >注册机构号</a
        ><a target="_blank" rel="noopener noreferrer" href="//ir.zhihu.com"
          >Investor Relations</a
        >
      </div>
      <div class="ZhihuRights">
        <span>© 2022 知乎</span
        ><a
          target="_blank"
          rel="noopener noreferrer"
          href="https://tsm.miit.gov.cn/dxxzsp/"
          >京 ICP 证 110745 号</a
        ><a
          target="_blank"
          rel="noopener noreferrer"
          href="https://beian.miit.gov.cn/"
          >京 ICP 备 13052560 号 - 1</a
        ><a
          target="_blank"
          rel="noopener noreferrer"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020088"
          ><img
            alt=""
            src="https://pic3.zhimg.com/80/v2-d0289dc0a46fc5b15b3363ffa78cf6c7.png"
          />京公网安备 11010802020088 号</a
        ><a
          href="https://zhstatic.zhihu.com/assets/zhihu/publish-license.jpg"
          target="_blank"
          rel="noopener noreferrer"
          >出版物经营许可证</a
        ><span>互联网药品信息服务资格证书（京）- 非经营性 - 2017 - 0067</span>
      </div>
      <div class="ZhihuReports">
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://zhuanlan.zhihu.com/p/28852607"
          >侵权举报</a
        ><a target="_blank" rel="noopener noreferrer" href="http://www.12377.cn"
          >网上有害信息举报专区</a
        ><a target="_blank" rel="noopener noreferrer" href="/term/child-jubao"
          >儿童色情信息举报专区</a
        ><span>违法和不良信息举报：010-82716601</span
        ><a href="mailto:jubao@zhihu.com">举报邮箱：jubao@zhihu.com</a>
      </div>
      <div class="css-1xaekgw">
        <img
          width="80"
          src="https://pica.zhimg.com/80/v2-ccdb7828c12afff31a27e51593d23260_720w.png"
          alt="本站提供适老化无障碍服务"
        />
      </div>
    </footer>
  </div>
</template>

<script lang="ts">
import createMessage from '../hooks/createMessage'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import ValidateInput, { RulesProp } from '../components/ValidateInput.vue'
import { defineComponent, ref } from 'vue'
import ValidateForm from '../components/ValidateForm.vue'
export default defineComponent({
  name: 'Login',
  components: {
    ValidateInput,
    ValidateForm
  },
  setup() {
    const route = useRoute()
    const store = useStore()
    const router = useRouter()
    const inputRef = ref<any>()
    const emailVal = ref('lilj@163.com')
    const passwordVal = ref('123456')
    const emailRules: RulesProp = [
      { type: 'required', message: '电子邮箱地址不能为空' },
      { type: 'email', message: '请输入正确的电子邮箱格式' }
    ]
    const passwordRules: RulesProp = [
      { type: 'required', message: '密码不能为空' }
    ]
    const onFormSubmit = (result: boolean) => {
      console.log(result)
      console.log('..........', inputRef.value.validateInput())
      if (result) {
        // router.push({ name: 'column', params: { id: 1 } })

        const payload = {
          icode: 'DDD67A8B1E7B1FA6',
          email: emailVal.value,
          password: passwordVal.value
        }
        store
          .dispatch('loginAndFetch', payload)
          .then((res) => {
            console.log(res)
            const toPath = route.query.redirect || '/'
            console.log(toPath)

            createMessage('登陆成功 2s跳转首页', 'success')
            setTimeout(() => {
              if (route.query.redirect) {
                router.push(String(route.query.redirect))
              } else {
                router.push('/')
              }
            }, 2000)
          })
          .catch((e) => {
            console.log(e)
            createMessage(e, 'error')
          })
      }
    }
    // const emailRef = reactive({
    //   val: '',
    //   error: false,
    //   msg: ''
    // })

    // const validateEmail = () => {
    //   if (emailRef.val.trim() === '') {
    //     emailRef.error = true
    //     emailRef.msg = 'can not be empty'
    //   }
    // }
    return {
      onFormSubmit,
      emailVal,
      passwordVal,
      emailRules,
      passwordRules,
      inputRef
    }
  }
})
</script>

<style lang="scss" scoped>
.form-label {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  width: 96px;
  text-align: right;
  margin-right: 10px;
}

.login-container {
  height: 100vh;

  background: url(https://static.zhihu.com/heifetz/assets/sign_bg.db29b0fb.png)
    #b8e5f8 no-repeat;
  background-size: cover;

  overflow: auto;

  text-align: center;
  //   .content > * {
  //     margin-bottom: 30px;
  //   }
  .logo {
    margin-top: 30px;
    img {
      width: 128px;
      height: 81px;
      margin-bottom: 24px;
    }
  }
  .login {
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 40px;
    width: 400px;
    padding: 20px 0;
    background: #fff;
    .form {
    }

    .tip {
      font-size: 13px;
      padding: 12px 24px;
      color: grey;
      a {
        color: inherit;
        text-decoration: none;
      }
    }
    .Login-socialLogin {
      height: 60px;
      line-height: 60px;
      padding: 0 24px;
      box-sizing: border-box;
      display: flex;
      font-size: 15px;
      justify-content: space-between;
      color: #8590a6;

      .Button--plain {
        color: #8590a6;
        font-size: 14px;
        padding: 0;
        margin-left: 18px;
        background-color: transparent;
        border: none;
        border-radius: 0;
        .Login-socialIcon {
          margin-right: 6px;
        }
      }
    }
  }
  footer {
    text-shadow: 0 1px 2px #999;
    font-size: 12px;
    line-height: 21px;

    color: #fff;

    a {
      color: inherit;
      text-decoration: none;
    }
    .css-1xaekgw {
      margin-top: 20px;
    }
  }
}
/* h1 {
  background-clip: text;
color:transparent;
  background-image: linear-gradient(
    45deg,
    rgba(26, 26, 192, 0.8) 0,s
    rgba(34, 34, 187, 0.7) 3%,
    #fa709a 25%,
    #fee140 30%
  );
} */
</style>
